<template>
	<view style="height: 100%;">
		<view style="width: 100%;height: 100%;" v-show="noData">
			<echarts ref="echarts" :option="option" :canvasId="'echarts'+id"></echarts>
		</view>
	</view>
</template>

<script>
	import echarts from "@/components/echarts-uniapp/echarts-uniapp.vue"
	export default {
		props: ["data", "id", "color"],
		components: {
			echarts
		},
		data() {
			return {
				option: {},
				noData: true,
				lineColor: "#000"
			}
		},
		mounted() {
			this.getData()
		},
		watch: {
			data: {
				handler(val, oldVal) {
					// console.log(this.data, "<<<<<<<<<<")
					this.getData()
				},
				deep: true
			}
		},
		methods: {
			getData() {
				let data = []
				let time = []
				this.data.forEach((item, index) => {
					data.push(item.value)
					time.push(index + 1)
				})
				if (uni.getStorageSync('theme') == "theme1") {
					this.lineColor = this.color == "up" ? '#0065ff' : '#f05150'
				} else {
					this.lineColor = this.color == "up" ? '#f05150' : '#0065ff'
				}
				console.log(data, time, "<<<<<<<<<<")
				this.option = {
					grid: {
						containLabel: false,
						left: 5,
						right: 5,
						top: 2,
						bottom: 2
					},
					xAxis: {
						show: false, // 隐藏X轴
						type: 'category',
						data: time,
					},
					yAxis: {
						show: false, // 隐藏Y轴
						type: 'value',
						min: "dataMin",
					},
					tooltip: {
						show: false, // 隐藏Tooltip
					},
					series: [{
						name: 'Your Line Name',
						type: 'line',
						data: data,
						showSymbol: false,
						lineStyle: {
							color: this.lineColor,
						},
						areaStyle: {
							color: 'rgba(0,0,0,0)',
						},
					}, ],
				}
			}
		}
	}
</script>

<style>

</style>